<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>每日维护</title>
	<link rel="stylesheet" type="text/css" href="http://bobo.bj.bcebos.com/bootstrap.min.css">
	<style type="text/css">
		body{
			/*background-color: #000;*/
		}
		.tabBox{
			width: 800px;
			height: 900px;
			margin: 100px auto;
		}
		.alerbox{
			/*display: none;*/
			position: absolute;
			top: 200px;
			left: 50px;
			height: 300px;
			width: 200px;
			padding: 10px;
			border: 1px solid #ccc;
		}
		.demo{
		    margin-top: -5px;
		    width: 10px;
		    height: 10px;
		    background: url(img/wave.gif) 0 0 no-repeat;
		    /*text-indent: -99px;*/
		    overflow: hidden;
		}
	</style>
	<script src="http://bobo.bj.bcebos.com/jquery.min.js"></script>
	<script>

		function format(format, date) {
	        var o = {
	            "M+" : date.getMonth()+1, //月份
	            "d+" : date.getDate(), //日
	            "h+" : date.getHours()%12 == 0 ? 12 : date.getHours()%12, //小时
	            "H+" : date.getHours(), //小时
	            "m+" : date.getMinutes(), //分
	            "s+" : date.getSeconds(), //秒
	            "q+" : Math.floor((date.getMonth()+3)/3), //季度
	            "S" : date.getMilliseconds() //毫秒
	        };
	        var week = {
	            "0" : "/u65e5",
	            "1" : "/u4e00",
	            "2" : "/u4e8c",
	            "3" : "/u4e09",
	            "4" : "/u56db",
	            "5" : "/u4e94",
	            "6" : "/u516d"
	        };
	        if(/(y+)/.test(format)) {
	            format=format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
	        }
	        if(/(E+)/.test(format)) {
	            format=format.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[date.getDay()+""]);
	        }
	        for(var k in o){
	            if(new RegExp("("+ k +")").test(format)){
	                format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
	            }
	        }
	        return format;

	    }

		function dataPaste(dom,psdom) {
			var doms = dom.find('[psdata]');
			doms.each(function(index, el) {
				var q = "[psdata="+$(el).attr("psdata")+"]";
				psdom.find(q).val($(el).text());
				psdom.find(q).text($(el).val());
			});
		}

		function getdata(dom) {
			var doms = dom.find('[psdata]');
			var obj = {};
			doms.each(function(index, el) {
				obj[$(el).attr("psdata")] = $(el).text();
				if($(el).val()){obj[$(el).attr("psdata")] = $(el).val()}
			});
			return obj;
		}
	</script>
</head>
<body>
	<button type="button" class="cx1 btn btn-default">查询</button>
	<button type="button" id="dele" class="btn btn-danger">删除</button>
	<div class="tabBox">
		<table class="table table-striped table-bordered table-hover table-responsive">
		  <thead>
		  	<tr class="warning">
	  			<th>ID</th>
	  			<th>时间</th>
	  			<th>评分</th>
	  			<th>级别</th>
	  		</tr>	
		  </thead>
		  <tbody>
		  	
		  </tbody>
		</table>
		<div class="alerbox">
			<p>时间<input psdata="time" type="text"></p>
			<p>评分<input psdata="grade" type="text"></p>
			<p>级别<input psdata="rank" type="text"></p>
			<button id="save">保存</button>
			<button id="update">修改</button>
		</div>
	</div>
	<script type="text/javascript">
		//全局对象声明
		var tr;
		
		
		//事件绑定
		$('.cx1').click(function(event) {
			$.ajax({
				url: 'daysever.php?act=select',
				type: 'POST',
				dataType: 'html'
			})
			.done(function(data) {
				var arry = JSON.parse(data);
				var dom = [];
				for (var i = 0; i < arry.length; i++) {
					dom.push("<tr>");
					dom.push("<td psdata='id'>"+arry[i].id+"</td>");
					dom.push("<td psdata='time'>"+arry[i].time+"</td>");
					dom.push("<td psdata='grade'>"+arry[i].grade+"</td>");
					dom.push("<td psdata='rank'>"+arry[i].rank+"</td>");
					dom.push("</tr>");
				}
				$("tbody").html(dom.join(""));
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("--------------");
			});
		});


		$('#save').click(function(event) {
			$.ajax({
				url: 'daysever.php?act=add',
				type: 'POST',
				dataType: 'html',
				data: {mydata: JSON.stringify(getdata($(".alerbox")))},
			})
			.done(function(data) {
				if(data == "success"){
					$('.btn-default').click();
				}else{
					alert("添加失败");
				}
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("--------------");
			});
		});
		
		$("tbody").on('click',"tr",function(event) {
			$(this).addClass('danger').siblings().removeClass('danger');
			dataPaste($(this),$(".alerbox"));
		});

		$('#dele').click(function(event) {
			$.ajax({
				url: 'daysever.php?act=dele',
				type: 'POST',
				dataType: 'html',
				data: {mydata: JSON.stringify(getdata($(".danger")))},
			})
			.done(function(data) {
				if(data == "success"){
					$('.btn-default').click();
				}else{
					alert("删除失败");
				}
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("=====");
			});
		});

		$('#update').click(function(event) {
			var old = getdata($(".danger"));
			var upobj = getdata($(".alerbox"));
			$.extend(true, old, upobj);
			$.ajax({
				url: 'daysever.php?act=update',
				type: 'POST',
				dataType: 'html',
				data: {mydata: JSON.stringify(old)},
			})
			.done(function(data) {
				if(data == "success"){
					$('.btn-default').click();
				}else{
					alert("修改失败");
				}
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("=====");
			});
		});
	</script>
</body>
</html>